<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="../css/home.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="userInfo">
    <!-- 页面头部 -->
    <header>
      <div style="display: flex;">
        <div class="container">
          <div class="row">
            <div class="col-lg-1" style="text-align: right;">
              <img src="../img/cat-foot.svg" height="40px" width="40px" />
            </div>
            <div class="col-lg-2" style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
              <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
            </div>
            <div class="col-lg-7">
              <ul style="font-family: 得意黑;">
                <li class="li_header"><a class="a_header" href="./home.html">首页</a></li>
                <li class="li_header"><a class="a_header" href="./about.html">关于仁爱</a></li>
                <li class="li_header"><a class="a_header" href="./service.html">服务项目</a></li>
                <li class="li_header"><a class="a_header" href="./keep_a_pet.html">养宠小百科</a></li>
                <li class="li_header"><a class="a_header" href="./join_us.html">加入我们</a></li>
                <li class="li_header"><a class="a_header" href="./shop.html">线上商店</a></li>
                <li class="li_header"><a class="a_header" href="./message.html">在线留言</a></li>
                <li id="li_1" class="li_header"><a class="a_header" href="./login.html">登录/注册</a></li>
                <li id="li_2" class="li_header"><a class="a_header" href="./userinfo.html">个人中心</a></li>
              </ul>
            </div>
            <div class="col-lg-2" style="text-align: left;overflow: hidden; position: relative;">
              <input type="text" style="margin-top: 8px;" v-model="name">
              <img @click="search()" src="../img/search.png" alt="" width="23px" height="23px"
                style="position: absolute; top: 11px; left: 135px; cursor: pointer;">
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 数据部分 -->
    <section style="margin: 3% 0;">
      <div class="container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="个人信息" name="个人信息" value="个人信息">
            <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="name">
                <el-input type="text" v-model="ruleForm.name" autocomplete="off" style="width: 300px;"></el-input>
              </el-form-item>
              <el-form-item label="账号" prop="account">
                <el-input type="text" v-model="ruleForm.account" disabled style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input type="text" v-model="ruleForm.phone" style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input type="text" v-model="ruleForm.email" style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="地址" prop="email">
                <el-input type="text" v-model="ruleForm.address" style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="dialogVisible = true">设置余额</el-button>
                <el-button type="success" @click="updateUser()">确认修改用户信息</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="我的订单" name="我的订单" value="我的订单">
            <el-table :data="dataForm" style="width: 100%">
              <el-table-column prop="id" label="订单id" width="180">
              </el-table-column>
              <el-table-column prop="name" label="商品名" width="180">
              </el-table-column>
              <el-table-column label="商品图片" width="100">
                <template slot-scope="scope">
                  <img v-if="scope.row.img" width="100%" :src="url+'/download/'+scope.row.img">
                </template>
              </el-table-column>
              <el-table-column prop="totalprice" label="总价格">
              </el-table-column>
              <el-table-column prop="count" label="数量">
              </el-table-column>
              <el-table-column prop="goodtype" label="类型">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="deleteOrders(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="我的购物车" name="我的购物车" value="我的购物车">
            <el-table :data="dataForm" style="width: 100%">
              <el-table-column prop="id" label="购物车id" width="180">
              </el-table-column>
              <el-table-column prop="goodsName" label="商品名" width="180">
              </el-table-column>
              <el-table-column label="商品图片" width="100">
                <template slot-scope="scope">
                  <img v-if="scope.row.goodsImg" width="100%" :src="url+'/download/'+scope.row.goodsImg">
                </template>
              </el-table-column>
              <el-table-column label="总价格">
                <template slot-scope="scope">
                  <h3 style="color: red;">{{scope.row.price * scope.row.count}}￥</h3>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.count" @change="updateCarGoods(scope.row)" :min="1" :max="10"
                    label="数量"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="deleteCarGoods(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div
              style="background-color: #fff;padding-top: 2.5%; height: 100px; width: 100%;text-align: right; display: flex;">
              <div style="margin-right: 2%;margin-left: auto;">
                <h2 style="color: red;font-weight: 600;">{{totalPrice}}￥</h2>
              </div>
              <div style="margin-right: 5%;">
                <el-button type="primary" round @click="dialogVisible2 = true">去付款</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="修改密码" value="修改密码">
            <el-form :model="passForm" status-icon label-width="100px" class="demo-ruleForm">
              <el-form-item label="旧密码" prop="name">
                <el-input type="password" v-model="passForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="checkPass">
                <el-input type="password" v-model="passForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="password">
                <el-input type="password" v-model.number="passForm.password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="passSubForm()">确认</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>
    <!-- 页尾 -->
    <footer style="background-color: #2f2d53;height: 350px; overflow: hidden; padding-top: 5%;">
      <div class="container">
        <div style="display: flex; padding-left: 20%;">
          <div style="width: 35%;">
            <div style="display: flex;">
              <div style="text-align: right;">
                <img src="../img/cat-foot.svg" height="40px" width="40px" />
              </div>
              <div style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
                <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
              </div>
            </div>
            <div style="color: #fff; margin-top: 5%;">
              <span>
                宠物护理和兽医服务对于维持<br>我们心爱的动物伴侣的健康和福祉至关重要
              </span>
            </div>
          </div>
          <div style="display: flex; width: 65%;">
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">快速链接</h4><br>
              <h6><a style="color: #fff !important;" href="./about.html">关于我们</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">服务项目</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">线上商店</a></h6>
            </div>
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">法律</h4><br>
              <h6 style="color: #fff;">常见问题</h6><br>
              <h6 style="color: #fff;">条款及细则</h6><br>
              <h6 style="color: #fff;">隐私与政策</h6>
            </div>
          </div>
        </div>
        <span style="color: #fff; display: block; text-align: center; font-size: 14px; margin-top: 2%;">©2024年
          版权所有仁爱宠物医院</span>
      </div>
    </footer>

    <el-dialog title="设置余额" :visible.sync="dialogVisible" width="30%">
      <el-input type="balance" v-model="balance" autocomplete="off"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateBalance()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 立即购买弹窗 -->
    <el-dialog title="购买" :visible.sync="dialogVisible2" width="30%">
      <span>该商品的价格为<span style="color: red;">{{totalPrice}}￥</span>,确定要购买吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="queryBuy()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  new Vue({
    el: '#userInfo',
    data() {
      return {
        activeName: '个人信息',
        name: "",
        passForm: {},
        dataForm: [],
        ruleForm: {},
        totalPrice: 0,
        dialogVisible: false,
        dialogVisible2: false,
        balance: 0.00,
        uri: 'http://localhost:8082',
        url: 'http://localhost:8082/common',
      };
    },
    created() {
      if(localStorage.getItem("userId") == null){
        window.location.href = './login.html';
        return;
      }
      this.pageUser();
    },
    methods: {
      search(){
        localStorage.setItem("name",this.name);
        window.location.href = './shop.html'
      },
      // 当点击分类时调用
      handleClick(el) {
        this.activeName = el.$attrs.value;
        if (this.activeName == "个人信息") {
          this.pageUser();
        } else if (this.activeName == "我的订单") {
          this.pageOrders();
        } else if (this.activeName == "我的购物车") {
          this.pageCar();
        }
      },

      // 查询购物车
      async pageCar() {
        this.dataForm = []
        const { data: result } = await this.$http.get(this.uri + "/car/query/" + localStorage.getItem("userId"));
        if (result.flag) {
          this.dataForm = result.list;
        } else {
          this.$message.error(result.message)
        }
        this.sumPrice();
      },
      // 删除购物车中商品
      async deleteCarGoods(row) {
        const { data: result } = await this.$http.get(this.uri + "/car/delete/" + row.id);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.pageCar();
      },
      // 修改购物车中商品数量
      async updateCarGoods(row) {
        // 统计出总价格
        row.totalprice = row.price * row.count;
        const { data: result } = await this.$http.post(this.uri + "/car/update", row);
        if (!result.flag) {
          thi.$message.error("增加失败，请稍后重试！");
        }
        this.sumPrice();
        this.pageCar();
      },
      // 不能购买
      queryBuy(){
        this.$message.info("该功能暂未开发，需要购买，请在商品详情页购买！");
        this.dialogVisible2 = false;
      },
      // 计算总价格
      sumPrice() {
        this.totalPrice = 0;
        this.dataForm.forEach(element => {
          this.totalPrice += element.price * element.count;
        });
      },
      // 订单查询
      async pageOrders() {
        this.dataForm = []
        const { data: result } = await this.$http.get(this.uri + "/orders/select/" + localStorage.getItem("userId"));
        if (result.flag) {
          this.dataForm = result.list;
        } else {
          this.$message.error(result.message);
        }
      },
      // 删除订单
      async deleteOrders(id) {
        const { data: result } = await this.$http.get(this.uri + "/orders/delete/" + id);
        if (result.flag) {
          this.$message.success(result.message)
        } else {
          this.$message.error(result.message)
        }
        this.pageOrders();
      },
      // 查询个人信息
      async pageUser() {
        const { data: result } = await this.$http.get(this.uri + "/user/queryUser/" + localStorage.getItem("userId"));
        console.log(result);
        // 拿到后端返回的数据
        this.ruleForm = result.l;
      },
      // 修改个人信息
      async updateUser() {
        const { data: result } = await this.$http.post(this.uri + "/user/updateUser", this.ruleForm);
        if (result.flag) {
          this.$message.success(result.message)
        } else {
          this.$message.error(result.error);
        }
        this.pageUser();
      },
      // 修改余额
      async updateBalance() {
        const { data: result } = await this.$http.get(this.uri + "/user/insertBalance/" + localStorage.getItem("userId") + "/" + this.balance);
        if (result.flag) {
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message);
        }
        this.dialogVisible = false;
        this.pageUser();
      },
      // 修改密码
      async passSubForm() {
        // 判断两次输入的密码是否一致
        if (this.passForm.checkPass !== this.passForm.password) {
          this.$message.error("两次输入的密码不一致，请重新输入");
          return;
        }
        // 获取当前用户的id
        this.passForm.id = localStorage.getItem("userId");
        // 密码输入一致，发送修改密码的请求
        const { data: result } = await this.$http.post(this.uri + "/user/updatePassword", this.passForm);
        if (result.flag) {
          // 这里表示修改成功，跳转登录页面
          window.location.href = './login.html';
          localStorage.removeItem("userId");
        } else {
          // 表示修改密码错误
          this.$message.error(result.message);
          // 清空数据
          this.passForm = {};
        }

      },
    }
  })
</script>

</html>